<script setup lang="ts">
import { onMounted, reactive } from 'vue';

const props: any = defineProps<{
    ujt: any;
}>();

const { $global, $fn, $ws }: any = props.ujt;

const rfData: any = reactive({
    link: null,
});

function linkReset() {
    rfData.link = JSON.parse(JSON.stringify($global.link));
}
function saveLink() {
    $fn.saveLink(rfData.link);
}
function defaultLink() {
    $fn.startLink().then((res: any) => {
        linkReset();
    });
}
onMounted(() => {
    linkReset();
});
</script>

<template>
    <div class="as-link-area" v-if="rfData.link">
        <div class="as-link">
            <div
                class="as-link-type"
                v-for="(itemclass, keyclass) of rfData.link"
                :key="'type' + keyclass"
            >
                <div class="as-link-type-tit">
                    {{ $global.lang.sys.link.class[keyclass] }}
                </div>
                <template v-for="(item, key) of itemclass" :key="'key' + key">
                    <div class="as-link-li" v-if="!item?.close">
                        <div class="as-link-li-tit">
                            {{ $global.lang.sys.link[key] }}：
                        </div>
                        <div class="as-link-li-input">
                            <input type="text" v-model="item.url" />
                        </div>
                        <div class="as-link-li-stat" v-if="keyclass == 'ws'">
                            {{ $ws?.[key]?.open ? '☑' : '☒' }}
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="as-link-btns">
            <div class="btn" @pointerdown="saveLink()">确认修改</div>
            <div class="btn" @pointerdown="defaultLink()">恢复默认</div>
            <div class="btn" @pointerdown="linkReset()">取消修改</div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.as-link-area {
    display: flex;
    flex-direction: column;
    .as-link {
        flex-grow: 1;
        .as-link-type {
            display: flex;
            flex-direction: column;
            .as-link-type-tit {
                background-color: var(--ch2);
                padding: 5px 12px;
            }
            .as-link-li {
                width: 100%;
                display: flex;
                .as-link-li-tit {
                    width: 120px;
                    text-align: right;
                }
                .as-link-li-input {
                    flex-grow: 1;
                    input {
                        width: 100%;
                        &:focus {
                            border-bottom: 1px solid var(--ch4);
                        }
                    }
                }
                .as-link-li-stat {
                    width: 60px;
                    text-align: center;
                }
            }
        }
    }
    .as-link-btns {
        height: auto;
        display: flex;
        .btn {
            flex-grow: 1;
            text-align: center;
            cursor: pointer;
            margin: 5px;
            padding: 5px;
            border-radius: 5px;
            background-color: var(--ch4);
            &:hover {
                background-color: var(--ch2);
            }
        }
    }
}
</style>
